<template>
  <div class="search-page">
    <h1
      class="search-header"
      :class="{ 'header-hidden': isInputFocused }"
    >
      Search It!
    </h1>
    <div class="search-bar">
      <input
        type="text"
        v-model="query.movieName"
        placeholder="输入电影名字"
        class="input-bar"
        :class="{ 'input-bar-focused': isInputFocused }"
        @focus="isInputFocused = true"
        @blur="isInputFocused = false"
      />
      <button @click="search">搜索</button>
    </div>
    <div class="type-bar-container">
      <label class="type-bar-label">选择电影类型:</label>
      <el-select
        v-model="query.movieType"
        multiple
        placeholder="选择电影类型"
        class="type-bar"
      >
        <el-option
          v-for="mtype in movieTypes"
          :key="mtype"
          :label="mtype"
          :value="mtype"
        ></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect';
import 'vue-multiselect/dist/vue-multiselect.min.css';
import {getMovieTypes} from '../utility/untility functions';

export default {
  components: {Multiselect},
  data() {
    return {
      query: {
        movieName: '',
        movieType: [],
      },
      movieTypes: [],
      isInputFocused: false, // Added data property
    }
  },
  methods: {
    search() {
      // Check if query.movieType is empty. no search will be performed if it is empty

      console.log("["+this.query.movieType.join(',')+"]")
      this.$router.push({
        path: '/results',
        query: {
          name: this.query.movieName,
          type: this.query.movieType.join(',')
        },
      })
    },
  },
  async created() {
    this.movieTypes = await getMovieTypes();
    console.log('Movie types:', this.movieTypes);
  },
}
</script>

<style scoped>
.search-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #1c1c1c;
  gap: 20px;
  padding: 20px;
}

.search-bar {
  display: flex;
  width: 100%;
  max-width: 800px; /* Increased max-width */
  align-items: center;
  gap: 10px;
  background-color: #2c2c2c;
  padding: 20px; /* Increased padding */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.input-bar {
  flex: 1;
  padding: 15px; /* Increased padding */
  border: 2px solid #ff0000;
  border-radius: 5px;
  font-size: 18px; /* Increased font-size */
  background-color: #333;
  color: white;
  transition: transform 0.3s ease;
}

.input-bar-focused {
  transform: scale(0.95); /* Input zooms out slightly when focused */
}

button {
  padding: 15px 30px; /* Increased padding */
  border: none;
  border-radius: 5px;
  background-color: #ff0000;
  color: white;
  font-size: 18px; /* Increased font-size */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

button:hover {
  background-color: #cc0000;
  transform: scale(1.05);
}

.type-bar-container {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.type-bar-label {
  color: #ff0000;
  font-size: 16px;
  font-weight: bold;
}

.type-bar {
  border: 2px solid #ff0000;
  border-radius: 5px;
  background-color: #333;
  color: white;
}

.el-select .el-input {
  background-color: #333;
  color: white;
}

.el-select .el-input__inner {
  border: none;
}

.el-select .el-input__inner:hover {
  border: none;
}

.el-select .el-input__inner:focus {
  border: none;
  box-shadow: none;
}

.search-header {
  color: #ff0000;
  font-size: 36px; /* Adjust font size as needed */
  font-weight: bold;
  margin-bottom: 20px; /* Space between header and search bar */
  text-align: center; /* Center the header text */
  transition: opacity 0.3s ease;
}

.header-hidden {
  opacity: 0; /* Header fades out when input is focused */
}
</style>
